<template>
	<view class="add-remark-page">
		<textarea v-model="form.mark" placeholder="请输入内容" :maxlength="500" />

		<view class="mark-length">
			<text>{{form.mark.length}} / 500</text>
		</view>

		<!-- 选择图片 -->
		<view class="shoose-img">
			<image v-if="uploadImg" :src="uploadImg" mode="aspectFit"></image>
			<image v-else src="../../static/add-img.png" mode="aspectFit" @click="chooseImg"></image>
		</view>

		<!-- 选择地址 -->
		<view class="location" @click="chooseLocation">
			<image class="img1" src="../static/location.png" mode="aspectFit"></image>
			<text>{{location ? location.address : '你在哪里'}}</text>
			<image class="img2" src="../../static/icon-right.png" mode="aspectFit"></image>
		</view>

		<!-- 时间 -->
		<view class="time">
			<text>{{timeText}}</text>
		</view>

		<!-- 提交按钮 -->
		<view class="submit" @click="submit">
			<text>确认</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					mark: '',
					mark_img: '',
					location: ''
				},
				uploadImg: '',
				timeText: '',
				location: ''
			};
		},
		onLoad({ module_id, subject_id }) {
			this.form.module_id = module_id
			this.form.subject_id = subject_id
			this.init()
		},
		methods: {
			init() {
				this.timeText = this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
			},

			chooseImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						this.uploadImg = res.tempFilePaths[0]
					}
				});
			},

			chooseLocation() {
				uni.chooseLocation({
					success: res => {
						this.location = res
					}
				});
			},

			upLoad(file) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.$u.api.baseUrl + '/api/upload', //仅为示例，非真实的接口地址
						filePath: file,
						name: 'file',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							token: this.vuex_token
						},
						success: uploadFileRes => {
							resolve(JSON.parse(uploadFileRes.data))
						},
						fail: err => {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '图片上传失败'
							})
							reject()
						}
					});
				})
			},

			async submit() {
				/* if (!this.form.mark) {
					uni.showToast({
						icon: 'none',
						title: '备注不能为空'
					})
					return
				}

				if (!this.uploadImg) {
					uni.showToast({
						icon: 'none',
						title: '图片不能为空'
					})
					return
				}

				if (!this.location) {
					uni.showToast({
						icon: 'none',
						title: '地址不能为空'
					})
					return
				} */

				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				//const { data } = await this.upLoad(this.uploadImg)
				//this.form.mark_img = data
				this.form.mark_img = this.uploadImg
				this.form.location = JSON.stringify(this.location)
				this.form.evaluation_sheet_id = this.vuex_evaluate.evaluation_sheet_id

				this.$u.post('/evaluationsheetmark', this.form).then(res => {
					uni.showToast({
						title: '备注成功'
					})

					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-remark-page {
		border-top: 1rpx solid #F5F5F5;

		textarea {
			box-sizing: border-box;
			width: 750rpx;
			height: 320rpx;
			padding: 20rpx 30rpx;
			background-color: white;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44rpx;
		}

		.mark-length {
			padding: 0 30rpx;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 34rpx;
			color: #999999;
			text-align: end;
			background-color: white;
		}

		.shoose-img {
			padding: 30rpx;
			background-color: white;

			image {
				width: 140rpx;
				height: 140rpx;
			}
		}

		.location {
			height: 100rpx;
			padding: 0 30rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			background-color: white;

			.img1 {
				width: 28rpx;
				height: 30rpx;
			}

			text {
				flex: 1;
				margin-left: 10rpx;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 44rpx;
				color: #131415;
			}

			.img2 {
				width: 16rpx;
				height: 32rpx;
			}
		}

		.time {
			padding: 0 30rpx;
			margin-top: 16rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: #999999;
		}

		.submit {
			margin: 60rpx auto 0 auto;
			width: 690rpx;
			height: 100rpx;
			background: #3D99BB;
			opacity: 1;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 100rpx;
			text-align: center;
			color: #FFFFFF;

			&:active {
				opacity: 0.4;
			}
		}
	}
</style>
